import React, {useEffect, useRef, useState} from 'react'
import {Button, Form, Input, Modal, Select, Switch, Table} from "antd";
import axios from "axios";
import {DeleteOutlined, FormOutlined} from "@ant-design/icons";
import UserForm from "../../../components/user-manage/UserForm";


export default function UserList() {
    function confirmMethod(item) {

    }


    useEffect(()=>{
        axios.get("http://localhost:5000/users?_expand=role").then(r => {
            setDataSource(r.data)
        })
    }, [])
    useEffect(()=>{
        axios.get("http://localhost:5000/regions").then(r => {
            setRegionList(r.data)
        })
    }, [])
    useEffect(()=>{
        axios.get("http://localhost:5000/roles").then(r => {
            setRoleList(r.data)
        })
    }, [])

    const [roleList, setRoleList] = useState([])
    const [regionList, setRegionList] = useState([])
    const [dataSource, setDataSource] = useState([])
    const [isOpen, setIsOpen] = useState(false)
    const addForm = useRef(null)
    const columns = [
        {
            title: 'ID',
            dataIndex: 'id',
            render:(id)=>{
                return <b>{id}</b>
            }

        },
        {
            title: '用户名称',
            dataIndex: 'username',

        },
        {
        title: '地区',
        dataIndex: 'region',
        render: (region)=>{
            return <div>{region===""?"全球": region}</div>
        }



        },
        {title: '角色名称',
         dataIndex: 'role',
         render:(role)=>{
            return <b>{role.roleName}</b>
         }


        },
        {title: '用户状态',
         dataIndex: 'roleState',
         render:(roleState, item)=>{
            return <Switch checked={roleState} disabled={item.default}></Switch>

            }

        },
        {
            title: '操作',
            render:(item)=>{


                return <div>
                    <Button type="danger" shape="circle" icon={<DeleteOutlined /> } disabled={item.default} onClick={()=>confirmMethod(item)}></Button>

                    <Button type="primary" shape="circle" icon={<FormOutlined />} disabled={item.default}></Button>

                </div>
            }
        }
    ]
    const addFormOk = ()=>{
        addForm.current.validateFields().then(res=>{
            // console.log(res)
            //让模态框消失

            setIsOpen(false)
        }).catch(err => {

            console.log(err)
        })

    }
    const [form] = Form.useForm();
    return (
        <div>
            <Button onClick={()=>{
                setIsOpen(true)
            }}>添加用户</Button>
            <Table dataSource={dataSource} columns={columns}
                   pagination={{
                       pageSize: 5
                   }}
            />;
            <Modal
                open={isOpen}
                title="新增用户"
                okText="确定"
                cancelText="取消"
                onCancel={()=>{setIsOpen(false)}
            }
                onOk={() => {
                addFormOk()
                }}
            >

                <UserForm roleList={roleList} regionList={regionList} ref={addForm}></UserForm>
            </Modal>
        </div>
    )
}
